* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box;
}

html,
body {
    width : 100%;
    height: 100%;
}

body {
    background     : url(../imgs/bg.jpg);
    background-size: cover;
}

.cnt-select {
    -moz-user-select   : none;
    -o-user-select     : none;
    -khtml-user-select : none;
    -webkit-user-select: none;
    -ms-user-select    : none;
    user-select        : none;
}

button {
    font-size: 16px;
}

header {
    position  : relative;
    width     : 100%;
    height    : 55px;
    background: #2196f3;

    .title {
        float      : left;
        margin-left: 15px;
        line-height: 55px;
        font-size  : 22px;
        color      : #fff;
    }

    .random {
        float       : right;
        margin-right: 30px;
        line-height : 55px;
        font-size   : 18px;
        color       : #fff;
    }

}

.input-area {
    width          : 100%;
    height         : 48px;
    display        : flex;
    justify-content: space-between;

    .input {
        height      : 100%;
        width       : 79.6%;
        padding-left: 6px;
        font-size   : 18px;
        background  : rgba(255, 255, 255, .7);
    }

    .btn {
        height: 100%;
        width : 20%;
    }
}

.console {
    width        : 100%;
    height       : 45%;
    z-index      : 1;
    // background: rgba(255, 255, 255, .7);

    p {
        padding  : 2px;
        font-size: 18px;
        color    : #fff;
    }

    .foo {
        width      : 1px;
        margin-left: -10px;
        border     : none;
        outline    : none;
    }
}

.btns {
    height        : calc(3 * 36px);
    display       : flex;
    flex-direction: column;

    button {
        flex  : 1;
        margin: 2px;
    }
}